---
title: Toggle Group
description: Provides a shared state to a series of toggle buttons.
---

<ComponentPreview name="p-toggle-group-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/toggle-group
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui-components/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="toggle-group" title="components/ui/toggle-group.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Toggle, ToggleGroup } from "@/components/ui/toggle-group"
```

```tsx
<ToggleGroup>
  <Toggle>Bold</Toggle>
  <Toggle>Italic</Toggle>
  <Toggle>Underline</Toggle>
</ToggleGroup>
```

## Examples

### Small Toggles

<ComponentPreview name="p-toggle-group-2" />

### Large Toggles

<ComponentPreview name="p-toggle-group-3" />

### With Outline Toggles

<ComponentPreview name="p-toggle-group-4" />

### Vertical

<ComponentPreview name="p-toggle-group-5" />

### Disabled

<ComponentPreview name="p-toggle-group-6" />

### With Disabled Toggle

<ComponentPreview name="p-toggle-group-7" />

### Multiple selection

<ComponentPreview name="p-toggle-group-8" />

### With Tooltips

<ComponentPreview name="tooltip-grouped" />

## Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with **coss ui** quickly.

### Prop Mapping

| Component     | Radix UI Prop                             | Base UI Prop                           |
| ------------- | ----------------------------------------- | -------------------------------------- |
| `ToggleGroup` | `type` (enum, `"single"` or `"multiple"`) | `multiple` (boolean, default: `false`) |

### Quick Checklist

- Replace `type="multiple"` → `multiple` on `ToggleGroup`
- Remove `type="single"` from `ToggleGroup`
- Always use arrays for `defaultValue`
- Use `Toggle` going forward; `ToggleGroupItem` remains for legacy

### Additional Notes

**coss ui** toggle group sizes are more compact compared to shadcn/ui, making them better suited for dense applications:

| Size      | Height (shadcn/ui) | Height (coss ui) |
| --------- | ------------------ | ---------------- |
| `sm`      | 32px               | 28px             |
| `default` | 36px               | 32px             |
| `lg`      | -                  | 36px             |

So, for example, if you were using the `default` size in shadcn/ui and you want to preserve the original height, you should use the `lg` size in coss ui.

### Comparison Examples

<span data-lib="radix-ui">
```tsx title="shadcn/ui"
// [!code word:type="multiple"]
<ToggleGroup type="multiple" defaultValue={["bold"]}>
  <ToggleGroupItem value="bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic">I</ToggleGroupItem>
  <ToggleGroupItem value="underline">U</ToggleGroupItem>
</ToggleGroup>
```
</span>

<span data-lib="base-ui">
```tsx title="coss ui"
// [!code word:multiple]
<ToggleGroup multiple defaultValue={["bold"]}>
  <Toggle value="bold">B</Toggle>
  <Toggle value="italic">I</Toggle>
  <Toggle value="underline">U</Toggle>
</ToggleGroup>
```
</span>
